<template>
    <div class="box">
        <h1>{{ptitle}}</h1>
        <div>
            <span ref="numDOM">{{num}}</span>
            <button @click="increment">+</button>
        </div>
    </div>
</template>

<script>
export default {
  data(){
    return{
        num:0
    }
  },
  props:['ptitle'],
  methods:{
    increment(){
      this.num++
    }
  },
//   beforeCreate(){
//     console.group('----1、beforeCreate--------');
//     console.log('data',this.num);
//     console.log('methods',this.fn);
//     console.log('props',this.ptitle);
//     console.groupEnd()
//   },
  created(){
    //定义一个间隔定时器，每隔1秒钟进行加1操作
    this.times=setInterval(() => {
      console.log('num',this.num);
      this.increment()
    }, 1000);
    // console.group('----2、created--------');
    // console.log('data',this.num);
    // console.log('methods',this.fn);
    // console.log('props',this.ptitle);
    // console.log('dom元素', this.$refs.titleDom);
    // console.groupEnd()
  },
  // beforeMount(){
  //    console.group('---3、beforeMount-------------');
  //    console.log('DOM',this.$refs.titleDom);
  //    console.groupEnd()
  // },
  // mounted(){
  //    console.group('---4、mounted-------------');
  //    console.log('DOM',this.$refs.titleDom);
  //    console.groupEnd()
  // },
  // beforeUpdate(){
  //    console.group('---5、beforeUpdate-------------');
  //    console.log('num-dom',this.$refs.numDOM.innerHTML);
  //    console.log('num-data',this.num);

  //    console.groupEnd()
  // },
  // updated(){
  //    console.group('---6、updated-------------');
  //    console.log('num-dom',this.$refs.numDOM.innerHTML);
  //    console.log('num',this.num);
  //    console.groupEnd()
  // },
  beforeDestroy(){
    console.log('---7、beforeDestroy-------------');
    //调用销毁定时器的方法
    clearInterval(this.times)
    
  },
//   destroyed(){
//      console.log('---8、destroyed-------------');
//   }
}
</script>

<style>
  .box{
    width: 300px;
    height: 200px;
    background: gray;
  }
</style>